
<template>
    <el-table :key="tableKey" size="mini" v-loading="paymentListLoading" :data="payment_list" :row-class-name="tableRowClassName" border fit highlight-current-row style="width: 100%;margin-top:20px">

        <el-table-column label="期数" align="center" width="50px">
        <template slot-scope="{row}">
            <span>{{ row.currentPeriods }}</span>
        </template>
        </el-table-column>
        <el-table-column label="还款日" align="center" >
        <template slot-scope="{row}">
            <span>{{  row.repayDate/1000|formatDate }}</span>
        </template>
        </el-table-column>
        <el-table-column label="应还本金" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.currentPrincipal }}</span>
        </template>
        </el-table-column>
        <el-table-column label="应还利息" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.currentInterest }}</span>
        </template>
        </el-table-column>

        <el-table-column label="应还总额" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.currentRepayTotalAmt }}</span>
        </template>
        </el-table-column>
        <el-table-column label="逾期天数" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.overdueDays }}</span>
        </template>
        </el-table-column>
        <el-table-column label="滞纳金" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.overduePenalty }}</span>
        </template>
        </el-table-column>
        <el-table-column label="已还本金" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.repayedPrincipal }}</span>
        </template>
        </el-table-column>
        <el-table-column label="已还利息" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.repayedInterest }}</span>
        </template>
        </el-table-column>
        <el-table-column label="已还滞纳金" align="center" width="90px">
        <template slot-scope="{row}">
            <span>{{ row.repayedOverduePenalty }}</span>
        </template>
        </el-table-column>

        <el-table-column label="已还总额" align="center" width="80px">
        <template slot-scope="{row}">
            <span>{{ row.repayedTotalAmt }}</span>
        </template>
        </el-table-column>
        <el-table-column label="当前状态" align="center" width="80px">
        <template slot-scope="{row}">
            <span v-if="row.planStatus=='01'">还款中</span>
            <span v-if="row.planStatus=='02'">已逾期</span>
            <span v-if="row.planStatus=='03'">提前结清</span>
            <span v-if="row.planStatus=='04'">正常结清</span>
            <span v-if="row.planStatus=='05'">逾期结清</span>

        </template>
        </el-table-column>

    </el-table>
</template>
<script>
    import {
        getTongrongPayment
    } from '@/api/finance'
    import  spanedit  from '@/components/el-div-edit/index.vue'
    import {formatDate} from '@/utils/formatDate.js'
    export default {
        name: 'TongrongPayment',
        props: ['applyNo'],
        components: {
            spanedit
        },
        filters: {
        formatDate(time) {
            time = time * 1000
            const date = new Date(time)

            return formatDate(date, 'yyyy-MM-dd')
            },
        },
        watch: {
            applyNo(newVal, oldVal) {
                // 当applyNo变化时，这里会执行相应的逻辑
                this.getTongrongPayment(this.applyNo); 
            }
        },
        created() {
            this.getTongrongPayment(this.applyNo); 
        },
        data() {
            return {
                tableKey:'payment',
                addDescMore:' ',
                tableRecord: 1,
                paymentListLoading: true,
                payment_list:[]
            }
        },
        methods:{
            getTongrongPayment(applyNo){
                
                getTongrongPayment({applyNo:applyNo}).then(response => {
                    this.paymentListLoading = false;
                    this.payment_list = response.data.loanInfoList[0].repayPlanResultList;
                })
            },
            tableRowClassName({row, rowIndex}) {
                let str = '';
                switch(row.planStatus){
                    case '03':case '04':
                    str = 'success-row';
                    break
                    case '02':
                    str = 'danger-row';
                    break
                    case '05':
                    str = 'warning-row';
                    break
                }

                return str;
            },
        }
    }
</script>
<style>
.collectcss{margin-top:7px;color:#999;font-size:14px}
.el-table .warning-row {
      background: orangered;
    }

  .el-table .success-row {
    background: #98dd72;
  }
</style>